<template>
  <div class="cpgl-product-wrapper">
    <div class="product-tree">
      <div class="product-tree-wrapper">
        <el-tree :data="treeData" :expand-on-click-node="false" :props="defaultProps" @node-click="handleNodeClick">
          <span slot-scope="{data}" :title="data.name">
            <el-tooltip placement="top" :open-delay="500" transition="">
              <div slot="content">{{data.name}}</div>
              <span :title="data.name">{{data.name}}</span>
            </el-tooltip>
          </span>
        </el-tree>
      </div>
    </div>
    <div class="product-table site-wrapper">
      <div class="header clearfix">
        <el-button size="small" :disabled="isObserver" type="primary" @click="createProduct">新增</el-button>
        <el-button size="small" type="primary" :disabled="multipleSelection.length === 0 || isObserver" @click="delTask(false)">批量删除</el-button>
        <el-button size="small" :disabled="isObserver" type="primary" @click="refresh">刷新</el-button>
        <el-button size="small" :disabled="isObserver" type="primary" @click="exportExcel">导出</el-button>
        <div class="filter" @click="showFilter = true;"><img src="../../../../assets/livolobim/filter.png" alt="">搜索</div>
        <div class="mask" v-if="showFilter" @click="showFilter = false;"></div>
        <div class="filter-wrapper" v-if="showFilter">
          <span class="filter-arrow"></span>
          <span class="filter-white"></span>
          <div class="filter-header">搜索</div>
          <el-form :model="form" style="padding: 0 16px;" label-width="70px">
            <el-form-item label="产品信息">
              <el-input placeholder="编号,型号,中文,英文" v-model="filterData.search"></el-input>
            </el-form-item>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button style="float:right;margin-right: 16px;" size="small" type="primary" @click="searchItem(true)">确定</el-button>
            <el-button style="float:right;margin-right: 16px;" size="small" @click="resetFilter">重置</el-button>
          </div>
        </div>
      </div>
      <div class="data-wrapper">
        <el-table :height="tableHeight" @row-click="getGoodPic" :highlight-current-row="true" :data="tableData" border style="width: 100%" @selection-change="handleSelectionChange">
          <el-table-column align="center" type="selection" width="55"></el-table-column>
          <el-table-column align="center" prop="sku" label="商品编号" min-width="100"></el-table-column>
          <el-table-column align="center" prop="newSku" label="V2编码" min-width="100"></el-table-column>
          <el-table-column align="center" prop="modelNum" label="商品型号" min-width="100"></el-table-column>
          <el-table-column align="center" prop="description" label="描述" min-width="160"></el-table-column>
          <el-table-column align="center" prop="specification" label="商品规格" min-width="100"></el-table-column>
          <el-table-column align="center" prop="color" label="颜色" min-width="80"></el-table-column>
          <el-table-column align="center" prop="weight" label="毛重" min-width="80"></el-table-column>
          <el-table-column align="center" prop="logoMean" label="logo" min-width="100"></el-table-column>
          <el-table-column align="center" prop="salesVolume" label="销售数量" min-width="80"></el-table-column>
          <el-table-column align="center" prop="price" label="销售单价" min-width="80"></el-table-column>
          <el-table-column label="操作" min-width="120" align="center">
            <template slot-scope="scope">
              <el-button @click="openEdit(scope.row, true)" type="text" size="small">查看</el-button>
              <el-button v-if="!isObserver" @click="openEdit(scope.row, false)" type="text" size="small">编辑</el-button>
              <el-button v-if="!isObserver" @click="delTask(scope.row.id)" type="text" size="small">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination
          style=""
          @size-change="sizeChangeHandle"
          @current-change="currentChangeHandle"
          :current-page="page"
          :page-sizes="[15, 20, 50, 100]"
          :page-size="pageSize"
          :total="totalPage"
          layout="total, sizes, prev, pager, next, jumper">
        </el-pagination>
        <div class="good-pic">
          <div style="position:absolute;top: -30px; left: 0;font-size: 18px; font-weight: bold;color: #606266;">产品图</div>
          <div v-if="goodImg.length === 0" style="position:absolute; height: 100%; width: 100%; justify-content: center; display:flex; align-items:center;font-size:20px;font-weight: bold;color: #909399;">点击商品查看产品图</div>
          <div class="good-pic-wrapper" style="height: 100%;padding: 10px 0;overflow-y: auto;">
            <img v-for="(item, idx) in goodImg" :key="idx" style="height: 100%; cursor:pointer;max-width: 33%;margin: 0 10px;" @click="previewPic(item.file)" :src="item.file" alt="">
          </div>
        </div>
        <el-dialog width="1000px" :visible.sync="showForm" :show-close="true">
          <div slot="title">
            <h2 style="text-align:center;margin-bottom:0;">{{form.id? isCheck? '查看': '编辑': '创建'}}产品</h2>
          </div>
          <div class="form-wrapper" style="padding: 0 20px;">
            <el-form ref="form" :model="form" label-width="120px">
              <el-row :gutter="20">
                <el-col :span="8">
                  <el-form-item style="font-weight: bold;" label="商品编号：">
                    <span slot="label">商品编号<span style="color: red;">*</span>：</span>
                    <el-input :disabled="isCheck" v-model="form.sku"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item style="font-weight: bold;" label="新商品编号：">
                    <span slot="label">新商品编号<span style="color: red;">*</span>：</span>
                    <el-input :disabled="isCheck" v-model="form.newSku"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item style="font-weight: bold;" label="商品型号：">
                    <el-input :disabled="isCheck" v-model="form.modelNum"></el-input>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row :gutter="20">
                <el-col :span="8">
                  <el-form-item style="font-weight: bold;" label="客户产品编号：">
                    <el-input :disabled="isCheck" v-model="form.customerSku"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item style="font-weight: bold;" label="中文名：">
                    <el-input :disabled="isCheck" v-model="form.nameCn"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item style="font-weight: bold;" label="英文名：">
                    <span slot="label">英文名<span style="color: red;">*</span>：</span>
                    <el-input :disabled="isCheck" v-model="form.name"></el-input>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row :gutter="20">
                <el-col :span="8">
                  <el-form-item style="font-weight: bold;" label="商品规格：">
                    <el-input :disabled="isCheck" v-model="form.specification"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item style="font-weight: bold;" label="计量单位：">
                    <span slot="label">计量单位<span style="color: red;">*</span>：</span>
                    <el-select :disabled="isCheck" style="width: 100%;" :filterable="true" v-model="form.unit" placeholder="请选择">
                      <el-option v-for="item in dwjl" :key="item.name" :label="item.name" :value="item.name"></el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item style="font-weight: bold;" label="单箱数量：">
                    <el-input :disabled="isCheck" @input="changeValue(form, 'numPerCase')" v-model="form.numPerCase"></el-input>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row :gutter="20">
                <el-col :span="8">
                  <el-form-item style="font-weight: bold;" label="增值税%：">
                    <el-input :disabled="isCheck" @input="changeValue(form, 'tax')" v-model="form.tax"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item style="font-weight: bold;" label="销售单价：">
                    <span slot="label">销售单价<span style="color: red;">*</span>：</span>
                    <el-input :disabled="isCheck" @input="changeValue(form, 'price')" v-model="form.price"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item style="font-weight: bold;" label="价格单位：">
                    <span slot="label">价格单位<span style="color: red;">*</span>：</span>
                    <el-select :disabled="isCheck" style="width: 100%;" :filterable="true" v-model="form.currency" placeholder="请选择">
                      <el-option v-for="item in currencyList" :key="item.code" :label="item.name" :value="item.code"></el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row :gutter="20">
                <el-col :span="8">
                  <el-form-item style="font-weight: bold;" label="毛重：">
                    <el-input :disabled="isCheck" @input="changeValue(form, 'weight')" v-model="form.weight"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item style="font-weight: bold;" label="重量单位：">
                    <span slot="label">重量单位<span style="color: red;">*</span>：</span>
                    <el-input :disabled="isCheck" v-model="form.weightUnit"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item style="font-weight: bold;" label="自定义价格：">
                    <el-input :disabled="isCheck" @input="changeValue(form, 'customPrice')" v-model="form.customPrice"></el-input>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row :gutter="20">
                <el-col :span="8">
                  <el-form-item style="font-weight: bold;" label="销售数量：">
                    <el-input :disabled="isCheck" @input="changeValue(form, 'salesVolume')" v-model="form.salesVolume"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item style="font-weight: bold;" label="颜色：">
                    <el-select :disabled="isCheck" style="width: 100%;" :filterable="true" v-model="form.color" placeholder="请选择">
                      <el-option v-for="item in colorArr" :key="item.name" :label="item.name" :value="item.name"></el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item style="font-weight: bold;" label="有无logo：">
                    <span slot="label">有无logo<span style="color: red;">*</span>：</span>
                    <el-select :disabled="isCheck" style="width: 100%;" v-model="form.logo" @change="selectChange" placeholder="请选择logo类型">
                      <el-option v-for="item in logoArr" :key="item.id" :label="item.name" :value="item.id"></el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row :gutter="20" v-if="form.logo === 20">
                <el-col :span="24">
                  <el-form-item style="font-weight: bold;" label="logo图：">
                    <input ref="uploadInput2" style="display:none;" type="file" @change="uploadFile2($event)">
                    <span v-if="!isCheck" class="addfilebtn" @click="$refs.uploadInput2.click()"><i class="el-icon-paperclip" style=""></i>添加图片</span>
                    <div v-if="form.logoUrl" class="fileitem">
                      <img style="width:16px;height:16px;position:relative;top:-2px;margin-right:2px;" :src="getPic(form.logoUrl)" alt="">
                      <span @click="previewPic(form.logoUrl)" style="width: 60%;overflow:hidden;text-overflow: ellipsis;vertical-align:bottom;white-space:nowrap;display:inline-block;">{{form.logoName}}</span>
                      <span v-if="!isCheck" class="uploadtip" @click="delLogo"><i class="el-icon-delete"></i></span>
                    </div>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row :gutter="20">
                <el-col :span="24">
                  <el-form-item style="font-weight: bold;" label="商品分类：">
                    <span slot="label">商品分类<span style="color: red;">*</span>：</span>
                    <span v-if="classPath.length === 0 && !isCheck" @click="showClass = true;" style="color: #409EFF;cursor:pointer;">选择分类</span>
                    <div @click="openClass" v-else class="good-class">
                      <span v-for="(item, idx) in classPath" :key="item.id" style="color: #409EFF;cursor:pointer;">
                        {{item.name}}
                        <i v-if="idx !== (classPath.length - 1)" class="el-icon-arrow-right"></i>
                      </span>
                    </div>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row :gutter="20">
                <el-col :span="24">
                  <el-form-item style="font-weight: bold;" label="备注：">
                    <el-input :disabled="isCheck" type="textarea" :rows="3" placeholder="请输入商品备注" v-model="form.remark"></el-input>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row :gutter="20">
                <el-col :span="24">
                  <el-form-item style="font-weight: bold;" label="产品图：">
                    <input ref="uploadInput" style="display:none;" type="file" @change="uploadFile($event)" multiple>
                    <span v-if="!isCheck" class="addfilebtn" @click="$refs.uploadInput.click()"><i class="el-icon-paperclip" style=""></i>添加图片</span>
                    <div class="fileitem" v-for="(file, idx) in form.fileList" :key="idx">
                      <img style="width:16px;height:16px;position:relative;top:-2px;margin-right:2px;" :src="getPic(file.fileName)" alt="">
                      <span @click="previewPic(file.file)" style="width: 60%;overflow:hidden;cursor:pointer;text-overflow: ellipsis;vertical-align:bottom;white-space:nowrap;display:inline-block;">{{file.fileName}}</span>
                      <span class="uploadtip" v-if="file.file && !isCheck" @click="delFile(idx)"><i class="el-icon-delete"></i></span>
                      <span class="uploadtip" style="color: red;cursor:none;" v-if="!file.file && !isCheck">上传中<i class="el-icon-loading"></i></span>
                    </div>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row :gutter="20" v-if="form.typeId === 'configurable'">
                <el-col :span="24">
                  <el-form-item style="font-weight: bold;" label="产品组成成分：">
                    <el-table :data="zccf" border style="width: 100%">
                      <el-table-column align="center" type="index" label="序号" width="60"></el-table-column>
                      <el-table-column align="center" prop="sku" label="商品编号" min-width="100"></el-table-column>
                      <el-table-column align="center" prop="modelNum" label="商品型号" min-width="100"></el-table-column>
                      <el-table-column align="center" prop="name" label="英文名" min-width="160"></el-table-column>
                    </el-table>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-form-item>
                <el-button style="float:right;" size="small" @click="showForm = false">关闭</el-button>
                <el-button v-if="!isCheck" style="float:right;margin-right: 10px;" size="small" type="primary" @click="saveForm">保存</el-button>
              </el-form-item>
            </el-form>
          </div>
        </el-dialog>
        <el-dialog title="选择商品分类" :visible.sync="showClass" width="600px">
          <el-form :model="handleForm" style="padding-right:100px;">
            <el-form-item label="选择分类：" label-width="120px">
              <el-tree :data="treeData" icon-class="el-icon-arrow-right" :expand-on-click-node="false" :props="defaultProps" @node-click="selectClass"></el-tree>
            </el-form-item>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button @click="showClass = false">取 消</el-button>
            <el-button type="primary" @click="saveClass">确 定</el-button>
          </div>
        </el-dialog>
        <el-dialog title="选择商品分类" :visible.sync="showClass2" width="600px">
          <el-form :model="handleForm" style="padding-right:100px;">
            <el-form-item label="选择分类：" label-width="120px">
              <el-tree :data="treeData" icon-class="el-icon-arrow-right" :expand-on-click-node="false" :props="defaultProps" @node-click="selectClass2"></el-tree>
            </el-form-item>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button @click="showClass2 = false">取 消</el-button>
            <el-button type="primary" @click="saveClass2">确 定</el-button>
          </div>
        </el-dialog>
      </div>
    </div>
  </div>
</template>

<script>
import dingMixin from "@/mixins/ding";
import formUtil from "@/utils/formUtil";
import {dateUtil} from '@/utils/dateUtil'

export default {
  data() {
    return {
      zccf: [],
      showClass: false,
      showClass2: false,
      treeData: [],
      defaultProps: {
        children: 'children',
        label: 'name'
      },
      showHandle: false,
      showPeopleBtn: false,
      showFilter: false,
      loading:false,
      showForm: false,
      tableHeight: window.tableHeight,
      tableData: [],
      page:1,
      pageSize: 15,
      totalPage: 1,
      handleForm: {
        id: '',
        taskStatus: '',
        taskResult: ''
      },
      priorityArr: [{
        name: '低',
        id: 1
      },{
        name: '中',
        id: 2
      },{
        name: '高',
        id: 3
      }],
      logoArr: [{
        name: '无',
        id: 0
      },{
        name: '通用logo',
        id: 10
      },{
        name: '自定义logo',
        id: 20
      }],
      form: {
        color: '',
        sku: '',
        newSku: '',
        modelNum: '',
        customerSku: '',
        name: '',
        nameCn: '',
        price: '',
        weight: '',
        categoryLinks: '',
        unit: '',
        weightUnit: '',
        specification: '',
        tax: '',
        currency: '',
        logo: '',
        logoUrl: '',
        logoName: '',
        numPerCase: '',
        remark: '',
        customPrice: '',
        salesVolume: '',
        fileList: []
      },
      formVerify: {
        sku: '请输入商品编号',
        newSku: '请输入新商品编号',
        name: '请输入英文名',
        unit: '请输入计量单位',
        price: '请输入销售单价',
        currency: '请选择价格单位',
        weightUnit: '请输入重量单位',
        logo: '请选择logo',
        categoryLinks: '请选择商品分类',
      },
      custormerList: [],
      filterData: {
        search: '',
        categoryId: '',
        categoryName: ''
      },
      currencyList: [],
      multipleSelection: [],
      categoryId: '',
      classPathCache: [],
      classPath: [],
      goodImg: [],
      isCheck: false,
      filterClassCache: '',
      colorArr: [],
      dwjl: [],
      mainHomePath: []
    }
  },
  computed: {
    isObserver() {
      return this.userInfo.roleIdList && this.userInfo.roleIdList.includes('1289086254290432001')
    }
  },
  mixins: [dingMixin],
  async mounted() {
    this.$nextTick(() => {
      this.tableHeight = document.documentElement['clientHeight'] - 400;
    })
    window.onresize = () => {
      this.tableHeight = document.documentElement['clientHeight'] - 400
    }
    this.treeData = await this.$httpN.get('crm/productcategory/tree');

    this.dwjl = await this.$httpN.postQ('crm/dict/list', {pid: '1300705215729983489'})
    this.colorArr = await this.$httpN.postQ('crm/dict/list', {pid: '1296004940481990658'})
    this.currencyList = await this.$httpN.postQ('mpb/currency/list', {}, false);
    this.searchItem(true);
  },
  beforeDestroy() {
    this.$parent.cpglMenus = [];
  },
  methods: {
    changeValue(target, attr) {
      target[attr] = target[attr].replace(/[^\d.]/g,'');
    },
    delTask(id) {
      let ids = id ? [id]: this.multipleSelection.map(item => item.id);
      formUtil.submitConfirm('您确定要删除产品吗？', async ()=> {
        if(!await this.$httpN.postB('crm/product/delete', ids, false)) return;
        formUtil.submitSuccess('删除成功');
        this.searchItem(true);
      })
    },
    resetFilter() {
      this.filterData = {
        search: '',
        categoryId: '',
        categoryName: ''
      };
      formUtil.resetData(this.filterClassCache);
    },
    openClass() {
      if(!this.isCheck) this.showClass = true;
    },
    async refresh() {
      if(!await this.$httpN.get('crm/product/refresh')) return;
      formUtil.submitSuccess('刷新成功');
      this.searchItem(true);
    },
    delLogo() {
      this.form.logoUrl = '';
      this.form.logoName = '';
    },
    selectChange(val) {
      this.form.logoUrl = ''
    },
    getGoodPic(row) {
      this.goodImg = row.fileList;
    },
    handleNodeClick(el, node) {
      this.categoryId = el.id;
      this.mainHomePath = [];
      this.getMainPath(node);
      this.searchItem(true);
      this.$parent.cpglMenus = this.mainHomePath;
    },
    selectClass(el, node) {
      this.classPathCache = [];
      this.getPath(node);
    },
    saveClass() {
      this.showClass = false;
      this.classPath = formUtil.deepCopy(this.classPathCache);
    },
    selectClass2(el, node) {
      this.filterClassCache = node;
    },
    saveClass2() {
      this.showClass2 = false;
      this.filterData.categoryName = this.filterClassCache.data.name;
      this.filterData.categoryId = this.filterClassCache.data.id;
    },
    getPath(node) {
      this.classPathCache.unshift(node.data);
      if(node.parent && node.parent.data.id) {
        this.getPath(node.parent)
      }
    },
    getMainPath(node) {
      this.mainHomePath.unshift(node.data);
      if(node.parent && node.parent.data.id) {
        this.getMainPath(node.parent)
      }
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    previewPic(url) {
      if(/\.(bmp|gif|jpg|pic|png|tif|jpeg)$/.test(url)) return this.dingPreviewPic(url);
    },
    getPic(filename) {
      if(filename) {
        if(/\.(bmp|gif|jpg|pic|png|tif|jpeg)$/.test(filename)){
          return 'https://livolo-office.oss-cn-hangzhou.aliyuncs.com/1276438103037435905.png'
        }else if(/\.(txt)$/.test(filename)){
          return 'https://livolo-office.oss-cn-hangzhou.aliyuncs.com/1276438530785140737.png'
        }else if(/\.(xls|xlsx)$/.test(filename)){
          return 'https://livolo-office.oss-cn-hangzhou.aliyuncs.com/1276438725690253314.png'
        }else if(/\.(doc|docx)$/.test(filename)){
          return 'https://livolo-office.oss-cn-hangzhou.aliyuncs.com/1276439195636850689.png'
        }else if(/\.(psd)$/.test(filename)){
          return 'https://livolo-office.oss-cn-hangzhou.aliyuncs.com/1276439984203751426.png'
        }else if(/\.(pdf)$/.test(filename)){
          return 'https://livolo-office.oss-cn-hangzhou.aliyuncs.com/1276440139145535490.png'
        }else if(/\.(ppt|pptx|dps|dpt)$/.test(filename)){
          return 'https://livolo-office.oss-cn-hangzhou.aliyuncs.com/1276440657859305473.png'
        }else if(/\.(rar|zip|arj|gz)$/.test(filename)){
          return 'https://livolo-office.oss-cn-hangzhou.aliyuncs.com/1276442063039193090.png'
        }else if(/\.(html|htm)$/.test(filename)){
          return 'https://livolo-office.oss-cn-hangzhou.aliyuncs.com/1276442135319633921.png'
        }else if(/\.(dwg|bak|dwt)$/.test(filename)){
          return 'https://livolo-office.oss-cn-hangzhou.aliyuncs.com/1276441741667459074.png'
        }else if(/\.(wav|aif|au|mp3|ram|wma|mmf)$/.test(filename)){
          return 'https://livolo-office.oss-cn-hangzhou.aliyuncs.com/1276442006684524546.png'
        }else if(/\.(avi|mov|rmvb|rm|flv|mp4)$/.test(filename)){
          return 'https://livolo-office.oss-cn-hangzhou.aliyuncs.com/1276442233483124737.png'
        }else{
          return 'https://livolo-office.oss-cn-hangzhou.aliyuncs.com/1276436590181343234.png'
        }
      }else {
        return 'https://livolo-office.oss-cn-hangzhou.aliyuncs.com/1276436590181343234.png'
      }
    },
    createProduct() {
      formUtil.resetData(this.form);
      this.classPathCache = [];
      this.classPath = [];
      this.showForm = true;
    },
    async openEdit(target, isCheck) {
      this.zccf = [];
      this.isCheck = isCheck;
      this.classPath = [];
      this.form = formUtil.deepCopy(target);
      if(this.form.typeId === 'configurable') this.zccf = await this.$httpN.get('crm/product/detailProducts/' + target.id);
      this.getClassPath(this.treeData, this.form.categoryLinks.split(','));
      this.showForm = true;
    },
    getClassPath(arr,target) {
      arr.forEach((item) => {
        if(target.includes(item.id)) this.classPath.push(item);
        if(item.children) this.getClassPath(item.children, target)
      })
    },
    delFile(idx){
      this.form.fileList.splice(idx, 1)
    },
    async uploadFile2(e) {
      var files = e.target.files;
      var $this = this;
      Object.keys(files).forEach(function(key){
        var file = files[key];
        if(!/\.(bmp|gif|jpg|pic|png|tif|jpeg)$/.test(file.name)) return $this.$message.error('图片格式不正确');
        if(file.size / 1024 / 1024 > 20) return $this.$message.error('上传单个文件大小不能超过20MB!请压缩文件')
        var formData = new FormData();
        formData.append("file", file);
        formData.append("name", 'file');
        $this.form.logoName = file.name;
        $this.$httpN.upload('fileUpload', formData).then(res => {
          $this.form.logoUrl = res.data.url;
        })
      })
      e.target.value = '';
    },
    async uploadFile(e) {
      var files = e.target.files;
      var $this = this;
      Object.keys(files).forEach(function(key){
        if($this.form.fileList.length === 3) return $this.$message.error('产品图片最多为3个')
        var file = files[key];
        if(!/\.(bmp|gif|jpg|pic|png|tif|jpeg)$/.test(file.name)) return $this.$message.error('图片格式不正确');
        if(file.size / 1024 / 1024 > 20) return $this.$message.error('上传单个文件大小不能超过20MB!请压缩文件')
        var formData = new FormData();
        formData.append("file", file);
        formData.append("name", 'file');
        let newfile = {
          fileName: file.name,
          file: '',
          mediaType: 'image'
        }
        $this.form.fileList.push(newfile)
        $this.$httpN.upload('fileUpload', formData).then(res => {
          if(res.data.code === 0) {
            newfile.file = res.data.url;;
          }else if(res.data.code === 500) {
            $this.form.fileList.pop();
          }
        })
      })
      e.target.value = '';
    },
    async saveForm() {
      let links = this.classPath.map(item => item.id);
      this.form.categoryLinks = links.join(',');
      if(!formUtil.verifyData(this.form, this.formVerify)) return;
      if(!await this.$httpN.postB('crm/product/save', this.form)) return;
      formUtil.submitSuccess('成功');
      this.showForm = false;
      this.searchItem(true);
    },

    sizeChangeHandle(limit) {
      this.pageSize = limit;
      this.searchItem(true);
    },
    currentChangeHandle(page) {
      this.page = page;
      this.searchItem();
    },
    async searchItem(init) {
      if(init) this.page = 1;
      let data = await this.$httpN.postB('crm/product/list',{
        search: this.filterData.search,
        categoryId: this.categoryId,
        page: this.page,
        limit: this.pageSize
      })
      this.tableData = data.list;
      this.totalPage = data.totalCount
    },
    async exportExcel() {
      let data = await this.$httpN.get('crm/product/export', {
        search: this.filterData.search,
        searchType: 'all',
      }, 'blob')
      this.downFile(data, `产品信息.xls`);
    },
    downFile(blob, fileName) {
      if (window.navigator.msSaveOrOpenBlob) {
        navigator.msSaveBlob(blob, fileName);
      } else {
        var link = document.createElement('a');
        link.href = window.URL.createObjectURL(blob);
        link.download = fileName;
        link.click();
        window.URL.revokeObjectURL(link.href);
      }
    }
  }
}
</script>


<style lang="scss">
  .cpgl-product-wrapper .product-tree::-webkit-scrollbar {/*滚动条整体样式*/
    width: 0px;     /*高宽分别对应横竖滚动条的尺寸*/
    height: 0px;
    scrollbar-arrow-color:red;
  }
  .cpgl-product-wrapper{
    height: calc(100vh - 60px);
    position: relative;
    .product-tree{
      position: absolute;
      left: -195px;
      top: 50px;
      width: 185px;
      z-index: 2;
      height: calc(100vh - 120px);
      overflow: auto;
      .el-tree{
        background: none;
        color: #FFF;
      }
      .el-tree-node__expand-icon{
        color: transparent;
        background: url('../../../../assets/img/triangle1.png');
        background-size: 80%;
        background-repeat: no-repeat;
        background-position: center;
      }
      .el-tree-node__expand-icon.is-leaf{
        color: transparent;
        background: url('../../../../assets/img/circle1.png');
        background-size: 40%;
        background-repeat: no-repeat;
        background-position: center;
      }

      .el-tree-node__content:hover, .el-tree-node:focus>.el-tree-node__content{
        background: #37424f;
        color: #419EFF;
        .el-tree-node__expand-icon{
          color: transparent;
          background: url('../../../../assets/img/triangle2.png');
          background-size: 80%;
          background-repeat: no-repeat;
          background-position: center;
        }
        .el-tree-node__expand-icon.is-leaf{
          color: transparent;
          background: url('../../../../assets/img/circle2.png');
          background-size: 48%;
          background-repeat: no-repeat;
          background-position: center;
        }
      }

    }
    .product-table{
      width: 100%;
      .header{
        position: relative;
        padding: 10px 0 0 20px ;
        .filter{
          cursor: pointer;
          float: right;
          margin-right: 30px;
          line-height: 30px;
          img{
            width: 16px;
            margin-right: 3px;
          }
        }
        .mask{
          position: fixed;
          height: 100vh;
          width: 100%;
          top: 0;
          right: 0;
          z-index: 3;
        }
        .filter-wrapper{
          position: absolute;
          width: 315px;
          padding-bottom: 20px;
          background: white;
          top: 48px;
          right: 20px;
          z-index: 99;
          border-radius: 5px;
          box-shadow: 0 0 3px black;
          .filter-header{
            line-height: 40px;
            padding-left: 16px;
            border-bottom: 1px solid #DDD;
            margin-bottom: 20px;
          }
          .filter-arrow{
            width:12px;
            height:12px;
            position: absolute;
            top: -7px;
            right: 20px;
            box-shadow: 0 0 3px black;
            transform: rotate(45deg);
          }
          .filter-white{
            width:18px;
            height:18px;
            position: absolute;
            top: -2px;
            right: 17px;
            border-radius: 3px;
            background: white;
          }
        }
      }
      .data-wrapper{
        padding: 0 20px;
        margin-top: 10px;
        .good-pic{
          position: relative;
          margin-top: 20px;
          height: 210px;
          width: 100%;
          border:1px solid #ECECEC;
        }
      }
      .select-btn{
        display: inline-block;
        font-weight: normal;
        margin-right: 5px;
        width: 80px;
        height: 28px;
        border-radius: 30px;
        background: #FAFAFA;
        border: 1px solid #ECECEC;
        position: relative;
        line-height: 28px;
        color: #7982A7;
        font-size: 12px;
        text-align: center;
        position: relative;
        cursor: pointer;
        .del{
          position: absolute;
          top:0;
          left: 0;
          width: 100%;
          height: 100%;
          border-radius: 30px;
          color: white;
          text-align: center;
          background:rgba(130, 130, 130, 0.9);
          display: none;
        }
        &:hover{
          .del{
            display: block;
          }
        }
      }
      .fileitem{
        line-height: 32px;
        margin-bottom: 5px;
        background: #F5F5F5;
        width: 474px;
        padding-left:15px;
        font-size: 12px;
        .uploadtip{
          float:right;
          margin-right: 20px;
          cursor: pointer;
        }
      }
      .addfilebtn{
        cursor: pointer;
        color: #909399;
        display: block;
        font-weight: normal;
      }
    }
  }


</style>
